<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			div{
				border: solid 2px black;
				padding: 10px;
				margin: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<h2>{{title}}</h2>
			<parent></parent>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<template id="temp1">
		<div>
			<p>这是{{name}}组件</p>
			<p>{{data}}</p>
		</div>
	</template>
	<template id="temp2">
		<div>
			<p>这是{{name}}组件 - {{data}}</p>
			<child></child>
		</div>
	</template>
	<template id="temp3">
		<div>
			<p>这是{{name}}组件 - {{data}}</p>
			<child></child>
		</div>
	</template>
	
	<script type="text/javascript">

		
		let temp1 = {
			template:"#temp1",
			data:()=>{
				return {
					name:"子 - a"
				}
			},
			inject:["data"]
		}
		
		
		let temp2 = {
			template:"#temp2",
			data:()=>{
				return {
					name:"子 - b"
				}
			},
			components:{
				child:temp1
			},
			inject:["data"]
		}
		
		let temp3 = {
			template:"#temp2",
			data:()=>{
				return {
					name:"子 - c"
				}
			},
			components:{
				child:temp2
			},
			inject:["data"]
		}
		
		let vm = new Vue({
			el:"#app",
			data:{
				title:"组件之间的传值-祖先传后代",
			},
			components:{
				parent:temp3
			},
			provide:{
				data:"来自远古的数据 - hello"
			}
		});
		
		
	</script>
</html>
